<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>黑马面面</title>
    <link rel="stylesheet" href="./css/normalize.css" />
    <!-- 先引入css文件 放到自己css文件的上面 -->
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <section class="warp">
    <!-- 头部区域 -->
     <div class="header">黑马面面</div>
     <!-- 导航栏部分 -->
      <nav class="nav">
        <a href="#" class="item">
          <img src="./icons/icon1.png" alt="">
          <span>HR面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/icon2.png" alt="">
          <span>笔试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/icon3.png" alt="">
          <span>技术面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/icon4.png" alt="">
          <span>模拟面试</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/icon5.png" alt="">
          <span>面试技巧</span>
        </a>
        <a href="#" class="item">
          <img src="./icons/icon6.png" alt="">
          <span>薪资查询</span>
        </a>
      </nav>
      <!-- go模块 -->
       <section class="go">
        <img src="./images/go.png" alt="">
       </section>
    </section>
    <!-- 就业指导模块 -->
     <section class="content">
       <!-- 头部 -->

      <div class="con-hd">
        <h4>
          <span class="icon">
            <img src="./icons/i2.png" alt="">
          </span>
          就业指导
        </h4>
        <a href="#" class="more">更多>></a>
      </div>
      <!-- 轮播图 -->
       <div class="get_job_focus">
        <!-- Swiper -->
  <div class="swiper-container ">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/pic.png" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/ldh.jpg" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
    </div>
    <!-- Add navigation -->
   <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
       </div>
     </section>

    <!-- 就业指导模块 -->
     <section class="content">
       <!-- 头部 -->

      <div class="con-hd">
        <h4>
          <span class="icon">
            <img src="./icons/i2.png" alt="">
          </span>
          就业指导
        </h4>
        <a href="#" class="more">更多>></a>
      </div>
      <!-- 轮播图 -->
       <div class="get_job_focus">
        <!-- Swiper -->
  <div class="swiper-container ">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/pic.png" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/ldh.jpg" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
      <div class="swiper-slide">
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
        <p>老师教你应对面试技巧</p>
      </div>
    </div>
    <!-- Add navigation -->
   <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
       </div>
     </section>
     <div class="zhan"></div>
     <!-- footer -->
      <footer class="footer">
        <a href="#" class="item">
          <img src="./icons/home.png" alt="">
          <p>首页</p>
        </a>
        <a href="#" class="item">
                  <a href="#" class="item">
          <img src="./icons/ms.png" alt="">
          <p>首页</p>
        </a>
        </a>
        <a href="#" class="item">

        <a href="#" class="item">
          <img src="./icons/net.png" alt="">
          <p>首页</p>
        </a>
        </a>
        <a href="#" class="item">
                  <a href="#" class="item">
          <img src="./icons/user.png" alt="">
          <p>首页</p>
        </a>
        </a>
      </footer>

    <script src="./js/flexible.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script>
      /* 就业指导轮播图 */
      (function() {
            var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2,
      spaceBetween: 30,
	  centeredSlides: true,
	  loop: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      }
    });
      })();
      /* 学习轮播图 */

  </script>
  </body>
</html>
